<script setup>
import { ref, defineEmits, onMounted } from 'vue'
const tabbarList = ['Home', 'Archive', 'Work', 'About']
const activeLeft = ref(0)
const activeWidth = ref(0)
const emit = defineEmits(['activeIndex'])
onMounted(() => {
  const dom = document.getElementsByClassName('tabbar_item')[0]
  const { width, left } = dom.getBoundingClientRect()
  const { left: parentLeft } = dom.parentNode.getBoundingClientRect()
  activeLeft.value = left - parentLeft + 'px'
  activeWidth.value = width + 'px'
})
function changeTabbar({ target }, index) {
  const { width, left } = target.getBoundingClientRect()
  const { left: parentLeft } = target.parentNode.getBoundingClientRect()
  activeLeft.value = left - parentLeft + 'px'
  activeWidth.value = width + 'px'
  emit('activeIndex', index)
}
</script>

<template>
  <div class="tabbar_container" :style="{ '--left': activeLeft, '--width': activeWidth }">
    <div class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeTabbar($event, index)">{{ item }}</div>
  </div>
</template>

<style scoped lang="scss">
.tabbar_container {
  position: absolute;
  bottom: 40px;
  left: 50%;
  padding: 0 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  border-radius: 12px;
  gap: 18px;
  background-color: rgba(29, 27, 27, 0.4);
  backdrop-filter: blur(4px);
  z-index: 2;

  .tabbar_item {
    flex: 1 1 0%;
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(244, 240, 240, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &::before {
    position: absolute;
    content: '';
    left: var(--left);
    bottom: 10px;
    width: var(--width);
    height: 2px;
    background: #fff;
    transition: all .4s;
    transition-timing-function: ease-in-out;
  }
}
</style>
